<template>
    <el-form-item label="受众（Optional）">
        <div class="flexbox">
            <div class="tk_crowd_left">
                <div class="tk_crowd_head flexbox flexcenter">
                    <div class="font_14 color_01">选择受众人群</div>
                </div>
                <div class="tk_crowd_list">
                    <div class="tk_crowd_item flexbox flexcenter" v-for="(item,index) in crowdList" :key="index">
                        <div class="tk_crowd_name flex">
                            {{item.name}}
                        </div>
                        <div class="tk_crowd_btn">
                            <el-link type="primary" :underline="false" @click="addAudience(item,'INCLUDE')">定向</el-link>
                            <el-link type="danger" :underline="false" @click="addAudience(item,'EXCLUDE')">排除</el-link>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tk_crowd_right">
                <div class="tk_crowd_head flexbox flexcenter flexbetween">
                    <div class="font_14 color_01">已选</div>
                    <el-link type="primary" :underline="false" @click="clearCrowd">清空</el-link>
                </div>
                <div class="tk_crowd_type flexbox flexcenter flexbetween">
                    <div class="font_14 color_01">受众人群</div>
                    <div>
                        <el-dropdown>
                            <span class="color_01">
                                {{getAduceText}}
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="checkCrowdDrop('ALL')">全部</el-dropdown-item>
                                <el-dropdown-item @click.native="checkCrowdDrop('INCLUDE')">定向</el-dropdown-item>
                                <el-dropdown-item @click.native="checkCrowdDrop('EXCLUDE')">排除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div class="tk_crowd_check">
                    <div class="tk_crowd_check_item flexbox flexcenter" v-for="(item,index) in filterAllCrowd(dataForm.adgroup.audience[dataForm.audience_index].all_audience,aduce_type)" :key="index">
                        <div class="tk_crowd_check_text flex">{{item.name}}</div>
                        <div class="tk_crowd_check_btn flexbox flexcenter">
                            {{item.audience_type=="INCLUDE"?"定向":"排除"}}
                            <i class="el-icon-close" @click="deleteCrowd(index)"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    name: "",
    data() {
        return {
            crowdList: [],
            aduce_type:"ALL"
        };
    },
    created() {
        this.getCrowd();
    },
    computed:{
        getAduceText(){
            let text = ""
            if(this.aduce_type=="ALL"){
                text = "全部"
            }else if(this.aduce_type=="INCLUDE"){
                text = "定向"
            }else if(this.aduce_type=="EXCLUDE"){
                text = "排除"
            }
            return text
        },

        
    },
    methods: {
        
        //获取人群
        async getCrowd() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/customList",
                {
                    page: 1,
                    // advertiser_id: "7254479860561641474",
                    advertiser_id:this.dataForm.base[0].advertiser_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    res.data[i].audience_type = null;
                }
                this.crowdList = res.data;
            }
        },

        // 添加人群
        addAudience(item,type) {
            let flag = false
            let on = null
            let list = this.dataForm.adgroup.audience[this.dataForm.audience_index].all_audience
            for(let i in list){
                if(item.audience_id==list[i].audience_id){
                    flag = true
                    on = i
                    break
                }
            }
            if(flag){
                list[on].audience_type = type
            }else{
                item.audience_type = type
                list.push(item);
            }
        },

        // 删除人群
        deleteCrowd(index){
            this.dataForm.adgroup.audience[this.dataForm.audience_index].all_audience.splice(index,1)
        },

        // 清空人群
        clearCrowd(){
            this.dataForm.adgroup.audience[this.dataForm.audience_index].all_audience = []
        },

        // 筛选
        checkCrowdDrop(type){
            this.aduce_type = type
        },

        // 已选人群包筛选
        filterAllCrowd(list, type) {
            var list = list,
                query = type;

            if (type == "ALL") {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.audience_type == query) {
                    return item;
                }
            });
            return list;
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
.tk_crowd_left,
.tk_crowd_right {
    border: 1px solid #ebebeb;
    border-radius: 2px;
}
.tk_crowd_left {
    width: 452px;
}
.tk_crowd_right {
    width: 228px;
    margin-left: 12px;
}
.tk_crowd_head {
    height: 56px;
    padding: 0 12px;
    border-bottom: 1px solid #ebebeb;
}
.tk_crowd_list {
    height: 264px;
    overflow-y: auto;
}
.tk_crowd_item {
    height: 44px;
    padding: 0 12px;
}
.tk_crowd_name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk_crowd_btn {
    flex-shrink: 0;
}
.tk_crowd_btn .el-link {
    margin-left: 12px;
}
.tk_crowd_type {
    height: 40px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 12px;
}
.tk_crowd_check{
    height: 224px;
    overflow-y: auto;
}
.tk_crowd_check_item{
    height: 36px;
    padding: 0 12px;
}
.tk_crowd_check_text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk_crowd_check_btn{
    flex-shrink: 0;
    margin-left: 8px;
}
.tk_crowd_check_btn .el-icon-close{
    font-size: 16px;
    color: #B4B7BD;
    margin-left: 4px;
    cursor: pointer;
}
</style>

